<!DOCTYPE html>
<html>

<head>
  <title>2列布局</title>
</head>

<body>
  <style>
    main,aside {
      height: 100px;
    }
    main {
      background-color: #f09e5a;
    }
    aside {
      background-color: #c295cf;
    }
  </style>
  <section>
    5. 利用媒体查询进行优化
  </section>
  <style>
    .wrap {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
    }
    .main {
      flex: 1;
    }
    .aside {
      width: 200px;
    }
    @media only screen and (max-width: 1000px) {
      .wrap {
        flex-direction: row;
      }
      .main {
        flex: 100%;
      }
    }
  </style>
  <div class="wrap">
    <main class="main">主要布局容器</main>
    <aside class="aside">次要布局容器</aside>
  </div>
</body>

</html>